<template>
  <div class="todoapp">
    <!-- 头 -->
    <todo-header />
    <!-- 身体 -->
    <todo-main :list="list"/>
    <!-- 底部 -->
    <todo-footer />
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    return {
      list: [
        { id: 100, name: '吃饭', isDone: true },
        { id: 201, name: '睡觉', isDone: false },
        { id: 103, name: '打豆豆', isDone: true }
      ]
    }
  }
}
</script>

<style></style>
